<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Vue({data}){
        this._data = data
    //    数据代理
        for(let key in this._data){
            Object.defineProperty(this,key,{
                get:function proxyGetter(){
                    return this._data[key]
                },
                set:function proxySetter(val){
                    console.log('设置了1',val)
                    this._data[key] = val
                }
            })
        }

    //给_data身上的所有属性设置监听-----数据劫持
        defineReactive(this._data)

    }

    function defineReactive(data){
        for(let key in data){
            observe(data,key)
        }
    }

    function observe(data,key){
        if(typeof data[key] === 'object' && data[key] !== null){
            defineReactive(data[key])
        }else{
            let value = data[key]
            Object.defineProperty(data,key,{
                get:function reactiveGetter(){
                    return value
                },
                set:function reactiveSetter(val){
                    console.log('设置了2',val)
                    value = val
                }
            })
        }

    }

    const vm = new Vue({
        data:{
            count:1,
            price:100,
            hobby:{
                age:18,
                sex:'男'
            }
        }
    })
    console.log(vm)
</script>
</body>
</html>